<template>
  <a-modal
    width="800px"
    v-model:visible="addCostVisible"
    :mask-closable="false"
    title="添加费用"
    @ok="addCostOk"
    @cancel="close"
    @close="close"
    unmount-on-close
  >
    <div class="custom-modal-body">
      <div class="add-cost-title">
        其他费用：
        <a-button type="primary" @click="onAddClick">添加</a-button>
      </div>
      <page-form :model="table" ref="formRef" layout="vertical">
        <table-index :table="table">
          <template #feeName="{ record }">{{ record.feeName }}</template>
          <template #costType="{ record, rowIndex }">
            <page-form-item
              size="1"
              style="margin-bottom: 0"
              :feild="`dataList[${rowIndex}].costType`"
              :rules="{ required: true, message: '请选择', trigger: 'blur' }"
            >
              <a-select v-model="record.costType" placeholder="请选择" popup-container=".custom-modal-body">
                <a-option :value="0">收款</a-option>
                <a-option :value="1">付款</a-option>
              </a-select>
            </page-form-item>
          </template>
          <template #totalAmount="{ record, rowIndex }">
            <page-form-item
              size="1"
              style="margin-bottom: 0"
              :field="`dataList[${rowIndex}].totalAmount`"
              :rules="{ required: true, message: '请输入', trigger: 'blur' }"
            >
              <i-input-number placeholder="请输入" v-model="record.totalAmount" />
            </page-form-item>
          </template>
          <template #remark="{ record }">
            <page-form-item size="1" style="margin-bottom: 0">
              <i-input v-model="record.remark" />
            </page-form-item>
          </template>
        </table-index>
        <div class="count-box"> 合计： {{ countTotal }}</div>
      </page-form>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="addCostOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { useTable } from '@/hooks/table'
  import { ref, computed } from 'vue'
  import decimal from '@/utils/calculation'
  import { unitVal } from '@/utils'

  const addCostVisible = ref(false)
  const formRef = ref()
  const emits = defineEmits(['ok'])

  const table = useTable({
    tableLoading: false,
    pagination: false,
    columns: [
      {
        title: '费用名称',
        slotName: 'feeName',
        width: 120,
      },
      {
        title: '收付款类型',
        dataIndex: 'costType',
        slotName: 'costType',
        width: 150,
      },
      {
        title: '金额',
        dataIndex: 'totalAmount',
        slotName: 'totalAmount',
        width: 150,
      },
      {
        title: '备注',
        dataIndex: 'remark',
        slotName: 'remark',
        width: 150,
      },
    ],
    operates: [
      {
        label: '删除',
        type: 'danger',
        method: (record: any, column: any, rowIndex: number) => {
          table.dataList.splice(rowIndex, 1)
        },
      },
    ],
    dataList: [],
  })

  const onAddClick = () => {
    //借调 Type 1借入 2借出
    if (costInfo.type == 1 || costInfo.type == 2 || costInfo.type == 0) {
      table.dataList.push({
        feeName: '借调附加费',
        costType: 1,
        totalAmount: '',
        remark: '',
      })
    } else {
      table.dataList.push({
        feeName: '车辆购置补充费',
        costType: 0,
        totalAmount: '',
        remark: '',
      })
    }
  }

  const addCostOk = () => {
    emits('ok', formRef, table.dataList, costInfo)
  }

  // 计算金额
  const countTotal = computed(() => {
    let total = 0
    table.dataList.forEach((item: any) => {
      if (item.costType === 1) {
        total = decimal.sub(total, item.totalAmount || 0)
        return
      }
      total = decimal.add(total, item.totalAmount || 0)
    })
    return unitVal(total, '元')
  })

  let costInfo: any = null
  const open = (data: any) => {
    console.log(data)
    costInfo = data
    addCostVisible.value = true
  }

  const close = () => {
    addCostVisible.value = false
    table.dataList = []
  }

  defineExpose({
    open,
    close,
  })
</script>

<style lang="less" scoped>
  .add-cost-title {
    margin-bottom: 20px;
  }

  .count-box {
    margin-top: 20px;
  }

  .custom-modal-body {
    position: relative;
    width: 100%;
    max-height: 70vh;
  }
</style>
